<template>
    <div class="head">
            <div class="head-left">
                <div class="logo"><img :src="logo" alt=""></div>
                <div class="title">
                    <p>{{title}}</p>
                    <!-- <p>DIGITAL TWIN YONGDING RIVER</p> -->
                </div>
                <div class="sub-title">{{sbTitle}}</div>
            </div>
            <div class="head-center">
                <div class="item" v-for="item in navList" :key="item.value">
                    <span :class="currentIndex==item.value?'active':''">{{ item.label }}</span> 
                    <Transition>
                        <ul class="sub-nav">
                            <li v-for="el in item.children" :key="el.value">{{el.label}}</li>
                        </ul>
                    </Transition>
                   
                </div>
            </div>
            <div class="head-right">
                <div class="item">
                    <img src="../assets/images/user.png" alt="">
                    <span>马健</span>
                </div>
                <div class="item">
                    <img src="../assets/images/set.png" alt="">
                    <span>设置</span>
                </div>
            </div>
        </div>
</template>
<script setup>
    import {ref} from 'vue'  
    import logo from '../assets/images/logo.png'
    const title=ref('数字孪生永定河')
    const sbTitle=ref('水资源调度管理')
    const navList=ref([])
    const currentIndex=ref(-1)
    navList.value=[{
            label:'监测感知',
            value:1,
            children:[{
                label:'二级菜单二级菜单',
                value:11,
            },{
                label:'二级菜单二级菜单',
                value:12,
            },{
                label:'二级菜单二级菜单',
                value:13,
            },{
                label:'二级菜单二级菜单',
                value:14,
            },{
                label:'二级菜单二级菜单',
                value:16,
            },{
                label:'二级菜单二级菜单',
                value:17,
            },{
                label:'二级菜单二级菜单',
                value:18,
            },{
                label:'二级菜单二级菜单',
                value:19,
            },{
                label:'二级菜单二级菜单',
                value:20,
            }]
        },{
            label:'水量调度',
            value:2,
            children:[{
                label:'二级菜单二级菜单',
                value:21,
            },{
                label:'二级菜单二级菜单',
                value:22,
            },{
                label:'二级菜单二级菜单',
                value:23,
            },{
                label:'二级菜单二级菜单',
                value:24,
            },{
                label:'二级菜单二级菜单',
                value:25,
            }]
        },{
            label:'监测感知',
            value:3,
            children:[{
                label:'二级菜单二级菜单',
                value:31,
            },{
                label:'二级菜单二级菜单',
                value:32,
            },{
                label:'二级菜单二级菜单',
                value:33,
            },{
                label:'二级菜单二级菜单',
                value:34,
            },{
                label:'二级菜单二级菜单',
                value:35,
            }]
        },{
            label:'考核评估',
            value:4,
            children:[{
                label:'二级菜单二级菜单',
                value:41,
            },{
                label:'二级菜单二级菜单',
                value:42,
            },{
                label:'二级菜单二级菜单',
                value:43,
            },{
                label:'二级菜单二级菜单',
                value:44,
            },{
                label:'二级菜单二级菜单',
                value:45,
            }]
        },{
            label:'监测感知',
            value:5,
            children:[{
                label:'二级菜单二级菜单',
                value:51,
            },{
                label:'二级菜单二级菜单',
                value:52,
            },{
                label:'二级菜单二级菜单',
                value:53,
            },{
                label:'二级菜单二级菜单',
                value:54,
            },{
                label:'二级菜单二级菜单',
                value:55,
            }]
        }]
    const handleNav=(val)=>{
        if(currentIndex.value==val){
            currentIndex.value=-1
            return;
        }
        currentIndex.value=val
    }
</script>
<style lang="scss" scoped>
.head {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 101px;
    background: url(../assets/images/head.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    padding-left: 50px;
    z-index: 9999;
    .head-left {
        display: flex;
        height: 100%;
        align-items: center;
        .logo {
            width: 50px;
            height: 50px;
            img {
                width: 100%;
                height: 100%;
            }
        }

        .title {
            padding-right: 22px;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                top: 5px;
                right: 0;
                width: 1px;
                height: 30px;
                background-image: radial-gradient(circle, #FFFFFF, rgba(255, 255, 255, 0));
                border-radius: 1px;
            }

            p {
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 12px;
                line-height: 12px;
                color: #FFFFFF;

                &:first-child {
                    font-size: 34px;
                    line-height: 34px;
                }
            }
        }

        .sub-title {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 30px;
            color: #FFFFFF;
            line-height: 30px;
            padding-left: 25px;
        }
    }
    .head-center{
        display: flex;
        margin-left: 157px;
        .item{
            position: relative;     
            &:hover,&.active{
                span{
                    background: url(../assets/images/bg2.png) no-repeat center;
                    background-size: 100% 100%;
                    color: #FFFFFF;
                    text-shadow: 0px 2px 10px rgba(0,255,255,0.82);
                }
                .sub-nav{
                    display: block;
                }
            }       
            span{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 168px;
                height: 76px;
                background: url(../assets/images/bg1.png) no-repeat center;
                background-size: 100% 100%;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 20px;
                color:  #b4d3ff;
                margin-right: 12px;
                cursor: pointer;
                
            }
            ul,li{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .sub-nav{
                display: none;
                position: absolute;
                top: 74px;
                left: 9px;
                width: 150px;
                max-height: 220px;
                overflow-y: auto;
                box-sizing: border-box;
                padding: 10px 10px 0;
                background: #083569;
                border-radius: 2px;
                text-align: center;
                z-index: 9999;
                li{
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 16px;
                    color: rgba(255,255,255,0.72);
                    margin-bottom: 15px;
                    cursor: pointer;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    &.active,&:hover{
                        font-weight: bold;
                        color:#fff;
                        text-shadow: 0px 2px 6px #00FFFF;
                    }
                }
            }
        }
        
    }
    .head-right{
        display: flex;
        align-items: center;
        margin-left: 40px;
        .item{
            display: flex;
            align-items: center;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            margin-left: 35px;
            cursor: pointer;
            img{
                margin-right: 5px;
            }
        }
    }
}

</style>